<template>
  <div class="preview box clmstart">
    <div class="btn_goback" @click="goBack">
      <span>{{ lang === "en" ? "Back" : "返 回"}}</span>
    </div>
    <img :src="url" class="img" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: "",
      url: "",
      lang: "",
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.url = this.$route.query.url;
    this.lang = this.$route.query.lang;
  },
  methods: {
    goBack() {
      this.$router.replace({
        path: `/${this.lang}/download`,
        query: { id: this.id },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.preview {
  font-size: 1.7rem;
  overflow-y: scroll;
  .img {
    width: 100%;
  }
  .btn_goback {
    position: fixed;
    display: table;
    background: #22a0d4;
    color: #fff;
    border-radius: 2rem;
    padding: 0.3rem 2rem;
    align-self: flex-start;
    margin: 4rem 0 2rem 2.5rem;
    padding: 0.3rem 3rem;
  }
}
</style>
